{extend name="./app/admin/view/main.html" /}
{block name="title"}
{assign name="itemName" value="$mipInfo['tagModelName']" /}
{assign name="itemUrl" value="tag" /}
{assign name="itemApiUrl" value="Tag" /}
{$itemName}分类管理 - {__block__}{/block}
{block name="style"}
<style>
</style>
{/block}

{block name="main"}
<div>
    
<header class="nicemip-container-header">
    <div class="float-left header-group">
        <h4 class="title">{$mipInfo['tagModelName']}</h4> <h5 class="sub-title">分类管理 (仅用于站内归档)</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='newAdd'>
            <span><Icon type="plus-round"></Icon> 添加分类</span>
        </button>
    </div>
</header>
<main class="nicemip-container-body" style="height: calc(100% - 50px)">
    <section class="nice-box">
        <section class="nice-box-body">
            <section class="diy-table-list" v-cloak>
                <div class="diy-table-item diy-table-item-header">
                    <ul class="list-unstyled row">
                        <li class="col-md-1"></li>
                        <li class="col-md-1">ID</li>
                        <li class="col-md-1">名称</li>
                        <li class="col-md-2">URL别名</li>
                        <li class="col-md-1 pl-4">排序</li>
                        <li class="col-md-1">模板</li>
                        <li class="col-md-1">关键词</li>
                        <li class="col-md-1">描述</li>
                        <li class="col-md-1"></li>
                        <li class="col-md-2">操作</li>
                    </ul>
                </div>
                <div v-if='categoryList.length' class="diy-table-body">
                    <div class="diy-table-item" v-for='(item,index) in categoryList' :class='{"is-open":item.isOpen}'>
                         <ul class="list-unstyled row">
                            <li class="col-md-1">
                                <i-Button type="text" size="small" v-if='item.children.length' @click='openChildren(item)'>
                                    <Icon type="ios-arrow-right" v-if='!item.isOpen'></Icon>
                                    <Icon type="ios-arrow-down" v-if='item.isOpen'></Icon>
                                </i-Button>
                            </li>
                            <li class="col-md-1">{{item.id}}</li>
                            <li class="col-md-1">{{item.name}}</li>
                            <li class="col-md-2">{{item.url_name}}</li>
                            <li class="col-md-1">
                                <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveUp(item)' :disabled='index==0'><Icon type="arrow-up-a"></Icon></i-Button>
                                <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveDown(item)' :disabled='categoryList.length==index+1'><Icon type="arrow-down-a"></Icon></i-Button>
                            </li>
                            <li class="col-md-1">{{item.template}}</li>
                            <li class="col-md-1"><span v-if='item.keywords'><Icon type="ios-checkmark-empty"></Icon></span></li>
                            <li class="col-md-1"><span v-if='item.description'><Icon type="ios-checkmark-empty"></Icon></span></li>
                            <li class="col-md-1"></li>
                            <li class="col-md-2">
                                <button size="small" class='ivu-btn ivu-btn-error ivu-btn-small' @click="categoryDel(index, item)">删除</Button>
                                <button size="small" class='ivu-btn ivu-btn-primary ivu-btn-small' @click="categoryEditDialog(index, item)">修改</button>
                            </li>
                        </ul>
                        <div class="children-list" v-if='item.children.length != 0' v-for='(sub,subIndex) in item.children'>
                                 <ul class="list-unstyled row">
                                    <li class="col-md-1"></li>
                                    <li class="col-md-1">{{sub.id}}</li>
                                    <li class="col-md-1">{{sub.name}}</li>
                                    <li class="col-md-2">{{sub.url_name}}</li>
                                    <li class="col-md-1">
                                        <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveUp(item,sub)' :disabled='subIndex==0'><Icon type="arrow-up-a"></Icon></button>
                                        <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveDown(item,sub)' :disabled='item.children.length==subIndex+1'><Icon type="arrow-down-a"></Icon></i-Button>
                                    </li>
                                    <li class="col-md-1">{{item.template}}</li>
                                    <li class="col-md-1"><span v-if='item.keywords'><Icon type="ios-checkmark-empty"></Icon></span></li>
                                    <li class="col-md-1"><span v-if='item.description'><Icon type="ios-checkmark-empty"></Icon></span></li>
                                    <li class="col-md-1"></li>
                                    <li class="col-md-2">
                                        <button size="small" class='ivu-btn ivu-btn-error ivu-btn-small' @click="categoryDel(subIndex, sub)">删除</button>
                                        <button size="small" class='ivu-btn ivu-btn-primary ivu-btn-small'  @click="categoryEditDialog(subIndex, sub)">修改</button>
                                    </li>
                                </ul>
                        </div>
                     </div>
                </div>
                <div class="no-block" v-else>
                    <Icon type="ios-filing-outline"></Icon>
                    <p>暂无数据</p>
                </div>
            </section>
        </section>
    </section>
</main>
      <Modal :title="category.dialogCategoryTitle" v-model="category.dialogCategory" size="small" v-cloak>
            <i-form :model="category" :rules="category.categoryRules" ref="category" :label-width="80">
                <Form-Item label="分类" prop="title">
                    <i-Select v-model="category.pid" style="width:200px" :disabled='category.categoryStatus && category.pid == 0 && category.isChild'>
                        <i-Option v-for="item in category.categoryList" :disabled="item.disabled" :value="item.id" :key="item.id">{{ item.name }}</i-Option>
                    </i-Select>
                </Form-Item> 
                <Form-Item label="分类名称" prop="name">
                    <i-input v-model="category.name" placeholder="例：网站优化"></i-input>
                </Form-Item>
                <Form-Item label="URL别名" prop="url_name">
                    <i-input placeholder="例：seo" v-model="category.url_name"><i-Button slot="append" class="tags-btn" @click='getPinyin'>获取拼音</i-Button></i-input>
                </Form-Item>
                <!-- <Form-Item label="模板" prop="template">
                    <i-Select v-model="category.template" transfer style="width:200px">
                        <i-Option v-for="item in templateList" :value="item" :key="item">{{ item }}</i-Option>
                    </i-Select>
                </Form-Item> 
                <form-item label="自定义标题">
                    <i-input placeholder="例：自定义分类标题" v-model="category.seo_title"></i-input>
                </Form-Item>
                <Form-Item label="关键词">
                    <i-input type="textarea" v-model="category.keywords" placeholder="例：SEO,SEO优化,搜索引擎优化,网站排名"></i-input>
                </Form-Item>
                <Form-Item label="描述">
                    <i-input type="textarea" v-model="category.description" placeholder="请输入description描述信息"></i-input>
                </Form-Item> -->
            </i-form>
            <div slot="footer" class="dialog-footer">
                <i-button @click="category.dialogCategory = false">取 消</i-button>
                <i-button type="primary" @click="categoryPost('category',category)">确 定</i-button>
            </div>
        </Modal>
          
</div>
{/block}
    
{block name="javascript"}
{__block__}
<script src="//cdn.bootcss.com/Sortable/1.6.0/Sortable.min.js"></script>
<script src="//cdn.bootcss.com/Vue.Draggable/15.0.0/vuedraggable.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            loading: false,
                category: {
                    categoryList: [],
                    dialogCategory: false,
                    dialogCategoryTitle: '',
                    isChild: false,
                    id: '',
                    pid: 0,
                    name: '',
                    url_name: '',
                    seo_title: '',
                    description: '',
                    keywords: '',
                    categoryRules: {
                        name: [{
                            required: true,
                            message: '请输入名称',
                            trigger: 'blur'
                        }],
                        url_name: [{
                            required: true,
                            message: '请输入别名',
                            trigger: 'blur'
                        }],
                    },
                    categoryStatus: false,
                    categoryListEdit: [],
                },
                categoryList: [],
                tempCategoryList: [],
                templateList: [],
        },
        watch: {
        },
        mounted() {
            this.getTemplateList();
            this.getCategoryList();
        },
        methods: {
            moveUp(item,subItem) {
                var categoryList = this.categoryList;
                for (var i = 0; i < categoryList.length; i++) {
                       categoryList[i].sort = i;
                       if (categoryList[i].children.length) {
                           for (var j = 0; j < categoryList[i].children.length; j++) {
                               categoryList[i].children[j].sort = j;
                           }
                       }
                }
                if (!subItem) {
                    for(var i = 0; i < categoryList.length; i++) {
                        if (item.id == categoryList[i].id) {
                            categoryList[i-1].sort = i;
                            categoryList[i].sort = i - 1;
                        }
                    }
                } else {
                    for(var i = 0; i < categoryList.length; i++) {
                        if (item.id == categoryList[i].id) {
                             for (var j = 0; j < categoryList[i].children.length; j++) {
                                   if (subItem.id == categoryList[i].children[j].id) {
                                    categoryList[i].children[j-1].sort = j;
                                    categoryList[i].children[j].sort = j - 1;
                                }
                            }
                        }
                    }
                    
                }
                this.categoryList = categoryList;
                this.tempCategoryList = categoryList;
                this.categorySortSave();
            },
            moveDown(item,subItem) {
                var categoryList = this.categoryList;
                for (var i = 0; i < categoryList.length; i++) {
                       categoryList[i].sort = i;
                       if (categoryList[i].children.length) {
                           for (var j = 0; j < categoryList[i].children.length; j++) {
                               categoryList[i].children[j].sort = j;
                           }
                       }
                }
                if (!subItem) {
                    for(var i = 0; i < categoryList.length; i++) {
                        if (item.id == categoryList[i].id) {
                            categoryList[i+1].sort = i;
                            categoryList[i].sort = i + 1;
                        }
                    }
                } else {
                    for(var i = 0; i < categoryList.length; i++) {
                        if (item.id == categoryList[i].id) {
                             for (var j = 0; j < categoryList[i].children.length; j++) {
                                   if (subItem.id == categoryList[i].children[j].id) {
                                    categoryList[i].children[j+1].sort = j;
                                    categoryList[i].children[j].sort = j + 1;
                                }
                            }
                        }
                    }
                }
                this.categoryList = categoryList;
                this.tempCategoryList = categoryList;
                this.categorySortSave();
            },
            openChildren(item) {
                var categoryList = this.categoryList;
                for (var i = 0; i < categoryList.length; i++) {
                    if (item.id == categoryList[i].id) {
                        categoryList[i].isOpen = !categoryList[i].isOpen;
                    }
                }
                this.categoryList = categoryList;
            },
            getTemplateList() {
                this.$nicemip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}/getTemplate', {
                }).then(res => {
                    if(res.code == 1) {
                       this.templateList = res.data;
                    }
                });
            },
            getPinyin: function() {
                if (!this.category.name) {
                    this.$Message.error('请输入名称');
                    return false;
                }
                this.$nicemip.ajax('{$domain}/admin/ApiAdminMipPost/getPinyin', {
                    words: this.category.name,
                }).then(res => {
                    if(res.code == 1) {
                        this.category.url_name = res.data;
                    }
                });
            },
            newAdd: function() {
                this.category.categoryStatus = false;
                this.category.isChild = false;
                this.category.pid = 0,
                this.category.name = '';
                this.category.url_name = '';
                this.category.seo_title = '';
                this.category.template = '{$itemUrl}';
                this.category.description = '';
                this.category.keywords = '';
                this.category.id = '';
                this.category.dialogCategory = true;
                this.category.dialogCategoryTitle = '添加分类';
                this.getCategoryList();
            },
            categorySortSave() {
                var _this = this;
                var itemList = this.categoryList;
                this.$nicemip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}/categorySortSave', {
                    itemList: itemList,
                }).then(res => {
                    if(res.code == 1) {
                        _this.$Message.success('操作成功');
                        _this.getCategoryList();
                    }
                });
            },
            categoryPost(val, param) {
                var _this = this;
                this.$refs[val].validate((valid) => {
                    if(valid) {
                        var parent=/^[a-zA-Z0-9_-]+$/;
                        if (!parent.test(this.category.url_name)) {
                            _this.$Message.error('别名输入值不支持');
                            return false;
                        }
                        if(this.category.categoryStatus == false) {
                            this.$nicemip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}/categoryAdd', {
                                pid: this.category.pid,
                                name: this.category.name,
                                url_name: this.category.url_name,
                                seo_title: this.category.seo_title,
                                template: this.category.template,
                                description: this.category.description,
                                keywords: this.category.keywords,
                            }).then(function(res) {
                                if(res.code == 1) {
                                    _this.category.dialogCategory = false;
                                    _this.$Message.success(res.msg);
                                    _this.getCategoryList();
                                }
                            });
                        } else {
                            this.$nicemip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}/categoryEdit', {
                                id: param.id,
                                pid: this.category.pid,
                                name: this.category.name,
                                url_name: this.category.url_name,
                                seo_title: this.category.seo_title,
                                template: this.category.template,
                                description: this.category.description,
                                keywords: this.category.keywords,
                            }).then(function(res) {
                                if(res.code == 1) {
                                    _this.category.dialogCategory = false;
                                    _this.$Message.success(res.msg);
                                    _this.getCategoryList();
                                }
                            });
                        }
                    }
                });
            },
            categoryDel(index, val) {
                var _this = this;
               this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        _this = this;
                        this.$nicemip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}/categoryDel', {
                            id: val.id,
                        }).then(function(res) {
                            if(res.code == 1) {
                                _this.$Message.success(res.msg);
                                _this.getCategoryList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            getCategoryList: function() {
                var _this = this;
                this.loading = true;
                this.$nicemip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}/categoryList', {
                }).then(res => {
                    _this.loading = false;
                    if(res.code == 1) {
                        var categoryList = res.data.categoryList;
                        for (var i = 0; i < categoryList.length; i++) {
                            categoryList[i].isOpen = false;
                        }
                        for (var i = 0; i < categoryList.length; i++) {
                            if (this.tempCategoryList.length) {
                                for (var j = 0; j < this.tempCategoryList.length; j++) {
                                       if (this.tempCategoryList[j].id == categoryList[i].id) {
                                        categoryList[i].isOpen = this.tempCategoryList[j].isOpen;
                                       }
                                }
                            }
                        }
                        this.categoryList = categoryList;
                        
                        var tempCategoryList = [{id:0,pid: 0,name:'顶层分类'}];
                        for (var i = 0; i < categoryList.length; i++) {
                            categoryList[i].disabled = false;
                            if (categoryList[i].pid == 0) {
                                tempCategoryList.push(categoryList[i]);
                            }
                        }
                        _this.category.categoryList = tempCategoryList;
                        
                       
                        
                    }
                });
            },
            categoryEditDialog(index, row) {
                this.category.dialogCategory = true;
                this.category.categoryStatus = true;
                this.category.name = row.name;
                this.category.pid = row.pid;
                this.category.url_name = row.url_name;
                this.category.seo_title = row.seo_title;
                this.category.template = row.template;
                this.category.description = row.description;
                this.category.keywords = row.keywords;
                this.category.id = row.id;
                this.category.isChild = false;
                this.category.dialogCategoryTitle = '编辑分类';
                if(row.pid == 0) {
                    for(var i = 0; i < this.category.categoryList.length; i++) {
                        if(row.id == this.category.categoryList[i].id) {
                            this.category.categoryList[i].disabled = true;
                            if(row.children.length > 0) {
                                this.category.isChild = true;
                            }
                        } else {
                            this.category.categoryList[i].disabled = false;
                        }
                    }
                }
            },
        }
    })
  </script>
{/block}